import React from 'react';
import { Tabs, Radio, Select, Input, Button, Form } from 'antd';
import globalStyle from './globalSet.less';
import { connect } from 'dva/index';
import { message } from 'antd/lib/index';
import UserSession from '@/UserSession';

const { TabPane } = Tabs;
const FormItem = Form.Item;

class GlobalSet extends React.Component {
  state = {
    maxCount: 'N',
    noMatchCaseReply: 'abb',
    noMatchCaseAction: 'exit',
    noMatchCaseKeepSlots: true,
    confusionReply: '抱歉，我不知道如何处理，请重新开始',
    confusionAction: 'exit',
    noAnswerReply: '木有答案',
    robotId: '',
    dialogId: '',
    settingId: '',
  };

  componentDidMount() {
    const { currentUser, dialogId } = this.props;
    this.setState({
      robotId: currentUser.robotId,
      dialogId: dialogId,
    });
    this.getSetting(currentUser.robotId);
  }

  onChange = (e, t) => {
    switch (t) {
      case 'noMatchCaseAction':
        this.setState({
          noMatchCaseAction: e.target.value,
        });
        break;
      case 'noMatchCaseKeepSlots':
        this.setState({
          noMatchCaseKeepSlots: e.target.value,
        });
        break;
      case 'confusionAction':
        this.setState({
          confusionAction: e.target.value,
        });
        break;
      case 'confusionReply':
        this.setState({
          confusionReply: e.target.value,
        });
        break;
      case 'noMatchCaseReply':
        this.setState({
          noMatchCaseReply: e.target.value,
        });
        break;
      case 'noAnswerReply':
        this.setState({
          noAnswerReply: e.target.value,
        });
        break;
    }
  };

  editMaxCount = val => {
    this.setState({
      maxCount: val,
    });
  };

  getSetting = robotId => {
    const { dispatch, dialogId } = this.props;
    dispatch({
      type: 'globalSet/getSetting',
      payload: {
        _id: 'common',
        robotId: robotId,
        dialogId: dialogId,
        urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
      },
      callback: res => {
        this.setState({
          settingId: res.settingId,
          maxCount: res.setting.invalidAsk.maxCount,
          noMatchCaseReply: res.setting.noMatchCase.reply,
          noMatchCaseAction: res.setting.noMatchCase.action,
          noMatchCaseKeepSlots: res.setting.noMatchCase.keepSlots,
          confusionReply: res.setting.confusion.reply,
          confusionAction: res.setting.confusion.action,
          noAnswerReply: res.setting.noAnswerReply,
        });
        this.props.form.setFieldsValue({
          maxCount: res.setting.invalidAsk.maxCount ? res.setting.invalidAsk.maxCount : 3,
          noMatchCaseReply: res.setting.noMatchCase.reply ? res.setting.noMatchCase.reply : '未满足任何条件',
          noMatchCaseAction: res.setting.noMatchCase.action ? res.setting.noMatchCase.action : 'exit',
          noMatchCaseKeepSlots: res.setting.noMatchCase.keepSlots != null ? res.setting.noMatchCase.keepSlots : true,
          confusionReply: res.setting.confusion.reply ? res.setting.confusion.reply : '抱歉，我不知道如何处理，请重新开始',
          confusionAction: res.setting.confusion.action ? res.setting.confusion.action : 'exit',
          noAnswerReply: res.setting.noAnswerReply ? res.setting.noAnswerReply : '木有答案',
        })
      },
    });
  };

  doSetting = () => {
    const { dispatch } = this.props;
    const { dialogId, robotId, settingId } = this.state;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'globalSet/doSetting',
          payload: {
            dialogId: dialogId,
            robotId: robotId,
            settingId: settingId,
            _id: 'common',
            setting: {
              invalidAsk: {
                maxCount: values.maxCount,
                action: 'stop',
                keepSlots: false,
              },
              noMatchCase: {
                reply: values.noMatchCaseReply,
                action: values.noMatchCaseAction,
                keepSlots: values.noMatchCaseKeepSlots,
              },
              confusion: {
                reply: values.confusionReply,
                action: values.confusionAction,
                keepSlots: false,
              },
              noAnswerReply: values.noAnswerReply,
            },
          },
          callback: res => {
            message.info(res.msg);
          },
        });
      }
    })
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        <Form>
          <div className={globalStyle.area} style={{ lineHeight: '40px', height: '80px' }}>
            用户连续超过&nbsp;&nbsp;
            <FormItem style={{ width: '32%', display: 'inline-block', marginBottom: 0 }}>
              {getFieldDecorator('maxCount',{
                initialValue: this.state.maxCount,
                rules:[{required:true,message:'询问次数必填'}]
              })(
                <Select onChange={this.editMaxCount}>
                  <Select.Option value="N">请选择</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                  <Select.Option value="4">4</Select.Option>
                  <Select.Option value="5">5</Select.Option>
                  <Select.Option value="100">不限次数</Select.Option>
                </Select>
              )}
            </FormItem>
            &nbsp;&nbsp;次询问不相关问题, 则结束多轮会话
          </div>

          <div className={globalStyle.area}>
            <div style={{ fontWeight: 'bold' }}>
              当多轮对话词槽完成后, 没有满足任何一个触发条件时:
            </div>
            <hr color="#F2F2F2" style={{ margin: '15px 0px' }} />
            <div className={globalStyle.dm} style={{ lineHeight: '40px', height: '40px' }}>
              回复话术&nbsp;&nbsp;
              <FormItem style={{ width: '80%', display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('noMatchCaseReply',{
                  initialValue: this.state.noMatchCaseReply,
                  rules:[{required:true,message:'回复话术必填'}]
                })(
                  <Input
                    placeholder="请输入回复话术"
                    onChange={event => {
                      this.onChange(event, 'noMatchCaseReply');
                    }}
                  />
                )}
              </FormItem>
            </div>
            <div className={globalStyle.dm} style={{ lineHeight: '40px', height: '40px' }}>
              对话处理&nbsp;&nbsp;
              <FormItem style={{ display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('noMatchCaseAction',{
                  initialValue: this.state.noMatchCaseAction,
                  rules:[{required:true,message:'处理方式必填'}]
                })(
                  <Radio.Group
                    onChange={event => {
                      this.onChange(event, 'noMatchCaseAction');
                    }}
                  >
                    {/* <Radio value="keep_on">不处理</Radio> */}
                    <Radio value="exit">结束多轮会话</Radio>
                    <Radio value="restart">重新开始多轮会话</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </div>
            <div style={{ marginTop: '15px', lineHeight: '40px', height: '40px' }}>
              是否清空已收集的词槽&nbsp;&nbsp;
              <FormItem style={{ display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('noMatchCaseKeepSlots',{
                  initialValue: this.state.noMatchCaseKeepSlots,
                  rules:[{required:true,message:'是否清空词槽必填'}]
                })(
                  <Radio.Group
                    onChange={event => {
                      this.onChange(event, 'noMatchCaseKeepSlots');
                    }}
                  >
                    <Radio value={true}>清空</Radio>
                    <Radio value={false}>不清空</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </div>
          </div>

          <div className={globalStyle.area}>
            <div style={{ fontWeight: 'bold' }}>当多轮对话流程逻辑混乱时:</div>
            <hr color="#F2F2F2" className={globalStyle.dm} />
            <div className={globalStyle.dm} style={{ lineHeight: '40px', height: '40px' }}>
              回复话术&nbsp;&nbsp;
              <FormItem style={{ width: '80%', display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('confusionReply',{
                  initialValue: this.state.confusionReply,
                  rules:[{required:true,message:'回复话术必填'}]
                })(
                  <Input
                    placeholder="请输入回复话术"
                    onChange={event => {
                      this.onChange(event, 'confusionReply');
                    }}
                  />
                )}
              </FormItem>
            </div>
            <div className={globalStyle.dm} style={{ lineHeight: '40px', height: '40px' }}>
              对话处理&nbsp;&nbsp;
              <FormItem style={{ display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('confusionAction',{
                  initialValue: this.state.confusionAction,
                  rules:[{required:true,message:'处理方式必填'}]
                })(
                  <Radio.Group
                    onChange={event => {
                      this.onChange(event, 'confusionAction');
                    }}
                  >
                    {/* <Radio value="keep_on">不处理</Radio> */}
                    <Radio value="exit">结束多轮会话</Radio>
                    <Radio value="restart">重新开始多轮会话</Radio>
                  </Radio.Group>
                )}
              </FormItem>
            </div>
            <div style={{ fontWeight: 'bold', marginTop: '15px' }}>当用户问题没有答案时:</div>
            <div className={globalStyle.dm} style={{ lineHeight: '40px', height: '40px' }}>
              回复话术&nbsp;&nbsp;
              <FormItem style={{ width: '80%', display: 'inline-block', marginBottom: 0 }}>
                {getFieldDecorator('noAnswerReply',{
                  initialValue: this.state.noAnswerReply,
                  rules:[{required:true,message:'回复话术必填'}]
                })(
                  <Input
                    placeholder="请输入回复话术"
                    onChange={event => {
                      this.onChange(event, 'noAnswerReply');
                    }}
                  />
                )}
              </FormItem>
            </div>
          </div>

          <div>
            <Button type="primary" onClick={this.doSetting} disabled={UserSession.whetherCanDelete()}>保存</Button>
          </div>
        </Form>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(GlobalSet));
